<template>
  <el-button @click="handleShow">{{props.btnText}}</el-button>
  <el-dialog 
    v-model="state.dialogVisible" 
    :title="props.btnText" 
    width="30%" 
    append-to-body
  >
    <el-input 
      v-model="state.rejectReason" 
      :rows="3" 
      type="textarea" 
      placeholder="请输入原因..." 
    />
    <div class="dialog-btns">
      <el-button type="primary" @click="handleReject">驳回</el-button>
      <el-button type="primary" @click="handleTeamAudit({
        auditStatus: AuditStatus.COMPLETED
      })">通过</el-button>
      <el-button @click="state.dialogVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>
<script lang='ts' setup>
import { reactive } from 'vue';
import { AuditStatus } from '@/views/competition/config/enum'
import { ElMessage } from 'element-plus'

const props = defineProps(["btnText", "id", "submit"])
const state = reactive<{
  dialogVisible: boolean
  rejectReason: string  // 驳回原因（驳回必填，通过非必填）
}>({
  dialogVisible: false,
  rejectReason: '',
})

const handleShow = () => {
  state.dialogVisible = true
}

// 驳回
const handleReject = () => {
  if (!state.rejectReason) {
    ElMessage({
      message: '驳回原因不能为空',
      type: 'warning',
    })
  } else {
    handleTeamAudit({
      "auditStatus": AuditStatus.FAILURE, //审核状态
      "reason": state.rejectReason // 驳回原因
    })
  }
}

/**
 * 审核
 */
const handleTeamAudit = (params: {
  auditStatus: AuditStatus, //审核状态
  reason?: string //驳回原因
}) => {
  props.submit({
    ...params, 
    id: props.id
  })
  state.dialogVisible = false
}

</script>
<style lang='scss' scoped>
.dialog-btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>